<template>
  <el-tooltip :visible="trigger" :effect="tooltipEffect" :content="textRef?.$el?.innerText" placement="right">
    <el-text v-bind="{truncated: !lineClamp,
                      lineClamp,
                      ...$attrs}"
             ref="textRef"
             @mouseenter.self="handleHover"
             @mouseleave.self="trigger = false"
    >
      <slot/>
    </el-text>
  </el-tooltip>
</template>

<script setup >
const props = defineProps({
  // 行数
  lineClamp: {
    type: [String, Number]
  },
})
const textRef = ref()
const {tooltipEffect} = storeToRefs(useSettingsStore());
const trigger = ref(false)
const handleHover = (e) => {
  if (isTextEllipsis(e.target)){
    trigger.value = true
  }
}

const isTextEllipsis = (el) => {
  if (!props.lineClamp) {
    // 单行省略判断
    return el.scrollWidth > el.clientWidth;
  } else {
    // 多行省略判断
    return el.scrollHeight > el.clientHeight;
  }
};

</script>

<style>
</style>
